<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="assets/js/jquery.min.js"></script>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/js/bootstrap.min.js">
    <!-- 导航菜单 -->
    <link rel="stylesheet" href="assets/css/normalize.css" media="screen">
    <link rel="stylesheet" href="assets/css/basic-styles.css" media="screen">
    <link rel="stylesheet" href="assets/css/header.css" media="screen">
    <link rel="stylesheet" href="assets/css/okayNav-base.css" media="screen">
    <link rel="stylesheet" href="assets/css/okayNav-theme.css" media="screen">
    <!--[if IE]>
        <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
    <script src="assets/js/jquery.okayNav.js"></script>

    <!-- 侧边菜单 -->
    <link rel="stylesheet" type="text/css" href="assets/css/sui.nav.css" />
    <script src="assets/js/sui.nav.min.js" type="text/javascript" charset="utf-8"></script>

    <!-- markdown 文件解析 -->
    <script src="assets/js/marked.min.js" type="text/javascript" charset="utf-8"></script>

    <!-- 模态框 -->
    <script src="assets/js/modal.js" type="text/javascript" charset="utf-8"></script>

    <!-- 自定义样式 -->
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="assets/css/token.css">

    <script src="assets/js/token.js"></script>

<style type="text/css">
    .modal-dialog {
        margin-top: 15%;
    }

    .modal-body {
        text-align: center;
    }

    .modal-body h1 {
        font-weight: bold;
        color: #ACACAC;
        margin-top: 51px;
        margin-bottom: 13px;
        font-size: 39px;
    }

    .modal-body p {
        color: #7C7C7C;
        font-size: 16px;
        margin-bottom: 15px;

    }

    .modal-body span {     
        float: right;
        margin-right: 15%;
        font-size: 12px;
    }


    .modal-body a {     
        color: #4F729D;
    }

    .modal-body input {
        width: 70%;
        margin-left: 15%;
    }

    .modal-body button {
        display: block;
        width: 50%;
        margin-left: 25%;
        background-color: #FFB847;
        border: none;
        color: #4E729A;
        margin-top: 50px;
        margin-bottom: 25px;
        padding: 12px;
        border-radius: 25px;
        font-size: 16px;
    }

    .okayNav-header img {
        width: 90%;
    }

    footer a:hover {
        color: #ffffff;
    }
    .downlaod {
        display: block;
        margin-left: 5%;
        text-align: center;
        background: linear-gradient(to bottom, #4C8DC2 0%,#255C9C 100%);
        color: #ffffff;
        border: none;
        padding: 10px 20px;
        font-size: 16px;
        border-radius: 6px;
        /*font-family: fantasy;*/
        margin-bottom: 30px;

    }

    .downlaod img {
        height: 23px;
        margin-right: 11px;
    }
</style>

</head>
<body>
    <header id="header" class="okayNav-header">
            <a class="okayNav-header__logo" href="/index.html">
            <img src="assets/img/logo.png" alt="placeholder+image">
        </a>

        <nav role="navigation" id="nav-main" class="okayNav">
            <ul>
                <li><a href="/index.html">Home</a></li>
                <li><a class="getToken">Download SDK</a></li>
                <li><a href="/token.html">中文</a></li>
            </ul>
        </nav>
    </header>

        <div class="container ">
            <div class="nav-second">
                <div id="sui_nav" class="sui-nav">
                    <button class="downlaod getToken"><img src="assets/img/download.png">DOWNLOAD</button>

                    <div class="sui-nav-wrapper nav-border nav-line">
                        <ul>
                            <li  data-id="1-android-studio-wifisdk-fast-integration-required-">
                                <a class="text-primary" >
                                    1、Fast Integration
                                </a>
                            </li>
                            <li  data-id="2-add-dependencies-required-">
                                <a class="text-primary" >
                                    2、Add dependencies
                                </a>
                            </li>
                            <li data-id="3-set-token-required-">
                                <a class="text-primary" >
                                    3、Set token
                                </a>
                            </li>
                            <li data-id="4-add-permission-required-">
                                <a class="text-primary" >
                                    4、Add permission
                                </a>
                            </li>
                            <li data-id="5-wifisdk-initialization-required-">
                                <a class="text-primary" >
                                    5、SDK initialization
                                </a>
                            </li>
                            <li data-id="6-start-wifi-page-required-">
                                <a class="text-primary" >
                                    6、Start WiFi page
                                </a>
                            </li>
                            <li data-id="7-customize-notification-optional-">
                                <a class="text-primary" >
                                    7、Customize notification
                                </a>
                            </li>
                            <li data-id="8-customize-ui-optional-">
                                <a class="text-primary" >
                                    8、Customize UI
                                </a>                                
                            </li>
                            <li data-id="9-proguard-rules-in-your-proguard-rules-pro-file-required-">
                                <a class="text-primary" >
                                    9、ProGuard rules
                                </a>                                
                            </li>
                        </ul>
                    </div>

                    <script type="text/javascript">
                        $(document).ready(function() {
                            // 加载md文件
                            $.get("./assets/md/sdk_en.md", function(response, status, xhr){ 
                                $("#body_content")[0].innerHTML = marked(response); 
                            });

                            $("li").on("click", function() {
                                console.log($(this).data("id"));
                                window.location.href = "#" + $(this).data("id");
                            })
                        })


                    </script>

                </div>
            </div>
            <div class="body">
                <p class="menu_btn">
                    <button class="MenuToggle btn btn-default">menu</button>
                </p>
                <div id="body_content">
                </div>
            </div>
        </div>

<div id="myModal1" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <h1>获取TOKEN</h1>
        <p>每个邮箱只能获取一个TOKEN</p>
        <input type="text" class="form-control" placeholder="请输入您的邮箱">
        <span><a href="">已经获取过TOKEN</a></span>
        <button class="getTokenBtn">获取</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div id="myModal2" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <h1>Fill the E-mail</h1>
        <p>
            Leave the email in order to get the latest SDK trends and get the token
        </p>
        <input type="text" id="dmail" class="form-control" placeholder="Please enter your email">
        <!-- <span>没有收到来自Weshare WiFi SDK的邮件？<a href="">换个邮箱</a>或者<a href="">重发邮件</a></span> -->
        <button class="downloadSDKBtn">Download SDK</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


   <!--  <footer>
        <span>@2011-2017</span>
        <a href="/token.html">中文</a>
        <a href="/license.html">WeShare WiFi SDK License Agreement</a>
        <a href="/contact.html">Contact us</a>
    </footer> -->
    
</body>

</html>